<template>
  <!--第三步-->
  <div>
    <el-tabs type="border-card" @tab-click="handleClickMerchantProduct">
      <el-tab-pane label="生效商品">
        <div class="content">
          <el-form :inline="true" class="demo-form-inline2" size="small">
            <el-form-item>
              <el-button type="primary" @click="add">添加促销商品</el-button>
            </el-form-item>
          </el-form>
          <div class="table-section">
            <el-table :data="merchantProductTableData"
                      border style="width: 100%" @selection-change="repelSelectionChange"
                      row-key="id"
                     
                      default-expand-all
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                      :size="size">
              <el-table-column prop="mpCode" label="商品编码" width="180" align="center">

              </el-table-column>
              <el-table-column prop="productName" label="商品名称" width="180" sortable align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.mpName}}</span>
                </template>
              </el-table-column>
              <!--<el-table-column prop="unit" label="计量单位" align="center">-->

              <!--</el-table-column>-->
              <el-table-column prop="merchantName" label="商家名称" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.merchantName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="storeName" label="店铺名称" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.storeName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="salePriceWithTax" label="零售价（元）" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.salePriceWithTax}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="channelIndividualLimit" label="个人单渠道限购" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.channelIndividualLimit" @blur="updatePriceOrLimit(scope.row)"
                            :size="size" placeholder="个人单渠道限购" :disabled="scope.row.disabled"/>
                </template>
              </el-table-column>
              <el-table-column prop="channelStoreLimit" label="店铺单渠道限购" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.channelStoreLimit" @blur="updatePriceOrLimit(scope.row)" :size="size"
                            placeholder="店铺单渠道限购" :disabled="scope.row.disabled"/>
                </template>
              </el-table-column>

              <el-table-column label="操作" fixed="right" align="center" width="200">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="delMerchantProducts(scope.row.promotionId,scope.row.mpId)"
                    type="text"
                    size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    
    </el-tabs>
    <!-- 添加商品 -->
    <el-dialog :visible.sync="dialogVisibleTwo" width="50%" title="添加商品">
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisibleTwo = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="dialogVisibleTwo = false"
                   @click="productTableData2Click" :loading="productEditLoading">确定
        </el-button>
      </div>
      <el-tabs v-model="tabsIndex">
        <el-tab-pane label="商品管理" name="first">
          <el-form :model="productForm" label-width="90px" ref="productForm" :size="size">
            <div class="col-sm-9">
              <el-form-item label="商品名称" prop="chineseName">
                <el-input v-model="productForm.chineseName" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <!--<div class="col-sm-9">-->
            <!--<el-form-item label="商品编号" prop="code">-->
            <!--<el-input v-model="productForm.code" auto-complete="off"></el-input>-->
            <!--</el-form-item>-->
            <!--</div>-->
            <!--<div class="col-sm-9">-->
            <!--<el-form-item label="商品条码" prop="barCode">-->
            <!--<el-input v-model="productForm.barCode" auto-complete="off"></el-input>-->
            <!--</el-form-item>-->
            <!--</div>-->
            <!--<div class="col-sm-9">-->
            <!--<el-form-item label="商品类别" prop="categoryId">-->
            <!--<TreeSelect :props="props" :options="optionData" :value="valueId" :clearable="isClearable" :accordion="isAccordion" @getValue="getValue($event)" @check-change="handleCheckChange"/>-->
            <!--</el-form-item>-->
            <!--</div>-->
            <!--<div class="col-sm-9">-->
            <!--<el-form-item label="商品品牌" prop="value6">-->
            <!--<el-select v-model="value6" multiple placeholder="请选择" collapse-tags>-->
            <!--<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <!--</el-form-item>-->
            <!--</div>-->
            <!--<div class="col-sm-9">-->
            <!--<el-form-item label="商家名称" prop="value5">-->
            <!--<el-select v-model="value5" multiple placeholder="请选择" collapse-tags>-->
            <!--<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <!--</el-form-item>-->
            <!--</div>-->
            <el-button size="mini" @click="productFormFind()">查询</el-button>
            <el-button size="mini" @click="resetForm('productForm')">重置</el-button>
          </el-form>

          <!--  商品列表 -->
          <div class="table-section">
            <el-table :data="tableDataTwo"
                      @selection-change="addSelectionChangeProduct"
                      :header-cell-style="tableHeaderColor"
                      ref="multipleTable"
                      style="width: 100%"
                      :row-class-name="tableRowClassName"
                      border
                      :size="size">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="id" label="商家商品id" align="center"></el-table-column>
              <el-table-column prop="code" label="商品编码" align="center"></el-table-column>
              <el-table-column prop="productVolume" label="体积(cm^3)" align="center"></el-table-column>
              <el-table-column prop="shelflifeDays" label="保质期天数" align="center"></el-table-column>
              <el-table-column prop="returnDays" label="包退天数" align="center"></el-table-column>
              <el-table-column prop="thirdProductCode" label="第三方商品编码" align="center"></el-table-column>
              <el-table-column prop="englishName" label="英文名称" align="center"></el-table-column>
              <el-table-column prop="t1" label="商品" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.typeOfProduct == 1">普通商品</span>
                  <span v-if="scope.row.typeOfProduct == 2">系列子品</span>
                  <span v-if="scope.row.typeOfProduct == 3">系列主品</span>
                  <span v-if="scope.row.typeOfProduct == 4">组合商品</span>
                </template>
              </el-table-column>
              <el-table-column prop="parentId" label="系列虚品的Id" align="center"></el-table-column>
              <el-table-column prop="grossWeight" label="商品毛重(g)" align="center"></el-table-column>
              <el-table-column prop="subtitle" label="副标题(商家自定义名称)" align="center"></el-table-column>
              <el-table-column prop="artNo" label="货号" align="center"></el-table-column>
              <el-table-column prop="replacementDays" label="包换天数" align="center"></el-table-column>
              <el-table-column prop="netWeight" label="商品最大净重(g)" align="center"></el-table-column>
              <el-table-column prop="netWeightStart" label="商品最小净重(g)" align="center"></el-table-column>
              <el-table-column prop="remark" label="备注" align="center"></el-table-column>
              <el-table-column prop="productLength" label="长度(cm)" align="center"></el-table-column>
              <el-table-column prop="freightTemplateId" label="运费模板id" align="center"></el-table-column>
              <el-table-column prop="productHeight" label="高度(cm)" align="center"></el-table-column>
              <el-table-column prop="t1" label="商品类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.type == 1">常规商品</span>
                  <span v-if="scope.row.type == 2">卡券</span>
                  <span v-if="scope.row.type == 3">海购</span>
                  <span v-if="scope.row.type == 4">赠品</span>
                  <span v-if="scope.row.type == 10">实体卡</span>
                  <span v-if="scope.row.type == 11">虚拟卡</span>
                  <span v-if="scope.row.type == 20">券</span>
                  <span v-if="scope.row.type == 5">生鲜产品</span>
                  <span v-if="scope.row.type == 6">增值服务</span>
                  <span v-if="scope.row.type == 7">其他</span>
                  <span v-if="scope.row.type == 21">积分商品</span>
                  <span v-if="scope.row.type == 31">称重商品</span>
                </template>
              </el-table-column>
              <el-table-column prop="chineseName" label="商品中文名称" align="center"></el-table-column>
              <el-table-column prop="t1" label="商品来源类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.sourceType == 1">平台</span>
                  <span v-if="scope.row.sourceType == 2">商家</span>
                </template>
              </el-table-column>
              <el-table-column prop="guaranteeDays" label="保修天数" align="center"></el-table-column>
              <el-table-column prop="t1" label="审核状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">待提交</span>
                  <span v-if="scope.row.status == 1">审核中</span>
                  <span v-if="scope.row.status == 2">审核通过</span>
                  <span v-if="scope.row.status == 3">审核不通过</span>
                  <span v-if="scope.row.status == 4">永久下架</span></template>
              </el-table-column>
              <el-table-column prop="productWidth" label="宽度(cm)" align="center"></el-table-column>
              <el-table-column prop="channelCode" label="渠道Code" align="center"></el-table-column>
              <el-table-column prop="saleCalcUnitId" label="销售计量单位主键id" align="center"></el-table-column>
              <el-table-column prop="auditMessage" label="审核原因" align="center"></el-table-column>
              <el-table-column prop="t1" label="上下架状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.canSale == 0">下架</span>
                  <span v-if="scope.row.canSale == 1">上架</span>
                </template>
              </el-table-column>
              <el-table-column prop="t1" label="商品数据类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.dataType == 1">运营商品</span>
                  <span v-if="scope.row.dataType == 2">商家商品</span>
                  <span v-if="scope.row.dataType == 3">店铺商品</span>
                </template>
              </el-table-column>
              <el-table-column prop="t1" label="商品子形式" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.subTypeOfProduct == 1">自建子品</span>
                  <span v-if="scope.row.subTypeOfProduct == 2">聚合子品</span>
                </template>
              </el-table-column>
              <el-table-column prop="t1" label="仓库类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.warehouseType == 0">有实体仓</span>
                  <span v-if="scope.row.warehouseType == 1">无实体仓</span>
                </template>
              </el-table-column>
              <el-table-column prop="subtitleLan2" label="副标题(二语言)" align="center"></el-table-column>
              <el-table-column prop="t1" label="价格策略" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.priceLevel == 2">店铺</span>
                  <span v-if="scope.row.priceLevel == 3">商家</span>
                  <span v-if="scope.row.priceLevel == 4">运营</span>
                </template>
              </el-table-column>
              <el-table-column prop="t1" label="组合商品类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.combineType == 0">固定组合</span>
                  <span v-if="scope.row.combineType == 1">可选组合</span>
                </template>
              </el-table-column>
              <el-table-column prop="firstShelfTime" label="首次上架时间" align="center"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
              <el-table-column prop="totalStock" label="总库存" align="center"></el-table-column>
              <el-table-column prop="salePriceWithTax" label="零售价" align="center"></el-table-column>
              <el-table-column prop="brandName" label="商品品牌" align="center"></el-table-column>
              <el-table-column prop="fullNamePath" label="商品类目" align="center"></el-table-column>
              <el-table-column prop="barCode" label="商品条形码" align="center"></el-table-column>
              <el-table-column prop="productUnit" label="计量单位" align="center"></el-table-column>
              <el-table-column prop="storeName" label="店铺名称" align="center"></el-table-column>
              <el-table-column prop="merchantName" label="商家名称" align="center">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import marketRequest from "@/market/request/marketRequest";

  export default {
    components: {},
    data() {
      return {
        size: "small",
        merchantProductTableDataMutex: [],
        merchantProductTableDataMutexTotal: 0,
        productPromotionListObject: {productPromotionList: []},
        productAddSelection: [],
        tableDataTwo: [],
        merchantProductTableData: [],
        dialogVisibleTwo: false,
        tabsIndex: 'first',
        productForm: {
          start: 1,
          limit: 10,
          productName: "",
          productNo: "",
          barCode: "",
          chineseName: "",
          code: ""
        },
        promotionId: 0,
        productTableDataTotal: 0,
        productTableData: [],
        productEditLoading: false,
        productPromotion: {
          //促销id
          promotionId: "1",
        },
      };
    },
    mounted() {
    },
    methods: {
      init(promotionId) {
        this.promotionId = promotionId;
      },
      handleClickMerchantProduct(tab, event) {
        if (tab.label == "生效商品") {
          this.getProductListV2(0);
        } else {
          this.getProductListV2(1);
        }
      },
      add() {
        this.dialogVisibleTwo = true;
      },
      repelSelectionChange(val) {
        this.repelSelection = val;
      },
      //更新价格或者限量-todo
      updatePriceOrLimit(val) {
        let jsonVal = JSON.stringify(val);
        console.log("========更新价格或者限量=======" + jsonVal);
        let callback = function (res) {
          if (res.code == "0000") {

          } else {
            //alert("修改失败");
          }
        };
        let temp = {};
        temp.promotionId = val.promotionId;
        temp.mpId = val.mpId;
        temp.channelStoreLimit = val.channelStoreLimit;
        temp.channelIndividualLimit = val.channelIndividualLimit;
        temp.promPrice = val.promPrice;
        console.log("========更新价格或者限量请求值=======" + temp);
        this.utils.request.promotionMerchantProductUpdatePriceOrLimit(temp, callback);
      },
      //批量添加商品
      productSaveBatch() {
        this.dialogVisibleTwo = !this.dialogVisibleTwo;
        this.productPromotionListObject.productPromotionList.splice(0, this.productPromotionListObject.productPromotionList.length);
        for (let i = 0; i < this.productAddSelection.length; i++) {
          let temp = {};
          temp.promotionId = this.promotionId;
          temp.mpId = this.productAddSelection[i].id;
          temp.mpName = this.productAddSelection[i].chineseName; // 商品名称
          temp.merchantName = this.productAddSelection[i].name;  //商家名称
          temp.storeName = this.productAddSelection[i].storeName;  //店铺名称
          temp.salePriceWithTax = this.productAddSelection[i].salePriceWithTax;  //零售价
          temp.mpCode = this.productAddSelection[i].code;  //商品编码
          temp.mpParentId = this.productAddSelection[i].parentId;
          temp.merchantId = this.productAddSelection[i].merchantId;
          temp.categoryId = this.productAddSelection[i].categoryId;
          // temp.categoryName     = this.productAddSelection[i].categoryName;    类别名称
          temp.picUrl = this.productAddSelection[i].pictureUrl;
          this.productPromotionListObject.productPromotionList.push(temp);

        }
        let callback = res => {
          if (res.code == "0000") {
            // 查询本地促销商品
            this.mainProductTableDataFormFind();
          }
        };
        this.utils.request.promotionMerchantProductSaveBatchV2(this.productPromotionListObject, callback);

      },
      //删除促销商品-todo
      delMerchantProducts(promotionId, mpId) {
        console.log("=====删除促销商品:promotionId===" + promotionId + "==mpId==" + mpId);
        let this_ = this;
        let callback = function (res) {
          if (res.code == "0000") {
            // 成功查询本地促销商品
            console.log(res)
            this_.mainProductTableDataFormFind();
          } else {
            this_.mainProductTableDataFormFind();
            alert("删除失败");
          }
        };
        let param = {};
        param.promotionId = promotionId;
        param.mpId = mpId;
        this.utils.request.promotionMerchantProductDelete(param, callback);
      },
      //互斥查看更多
      seeMore(row) {
        this.mutexDetailDialogVisible = true;
      },
      reloadMutexV2(row) {
        let this_ = this;
        let param = {
          mpId: row.mpId,
          promotionMerchantProductId: row.id,
          promotionId: this.promotionId,
        };
        let callback = res => {
          if (res.code == "0000") {
            // 查询本地促销商品
            this_.getProductListV2(1);
          }
        };
        marketRequest.reloadMutexV2(param, callback);
      },
      getProductListV2(type) {
        let this_ = this;
        let param = {
          promotionId: this.promotionId,
          mutexFlag: type,
          start: 1,
          limit: 100,
        };
        let callback = function (res) {
          console.log(res);
          if (res.code == "0000") {
            if (type == 0) {
              this_.merchantProductTableData = res.data.rows;
            } else {
              this_.merchantProductTableDataMutex = res.data.rows;
            }
          } else {
          }
        };
        marketRequest.getProductListV2(param, callback);
      },
      //确定 选择商品
      productTableData2Click() {
        console.log("======选择商品======" + this.productAddSelection);
        // 调添加商品 接口
        this.productTableDataSubmit2();
      },
      productTableDataSubmit2() {
        //this.productSaveBatch();
        this.batchSaveV2();
      },
      batchSaveV2() {
        let this_ = this;
        this.dialogVisibleTwo = !this.dialogVisibleTwo;
        this.productPromotionListObject.productPromotionList.splice(0, this.productPromotionListObject.productPromotionList.length);
        for (let i = 0; i < this.productAddSelection.length; i++) {
          let temp = {};
          temp.promotionId = this.promotionId;
          temp.mpId = this.productAddSelection[i].id;
          this.productPromotionListObject.productPromotionList.push(temp);
        }
        let callback = res => {
          if (res.code == "0000") {
            // 查询本地促销商品
            this_.getProductListV2(0);
          }
        };
        marketRequest.saveBatchV2(this.productPromotionListObject, callback);
      },
      addSelectionChangeProduct(val) {
        let this_ = this;
        this_.productAddSelection = val;
        console.log("==========addSelectionChangeProduct选择商品============" + JSON.stringify(val));
      },
      //修改table header的背景色
      tableHeaderColor({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background-color:rgb(250,250,250);'
        }
      },
      //table的双色条纹
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // 商品方法开始
      productFormFind() {
        let that_ = this;
        that_.utils.request.queryshopApi(this.productForm, function (resp) {
          if (resp.code == "0000") {
            that_.tableDataTwo = resp.data.rows;
          }
        });

      },
    }
  };
</script>

<style scoped>

</style>
